<template>
  <div>
    <el-card style="width: 98%; height: 90vh" shadow="always">
      <div
        class="category-top"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 40px;
          border-bottom: 2px solid rgb(244, 245, 250);
        "
      >
        <h3>账号列表</h3>
        <div
          style="width: 200px; display: flex; justify-content: space-evenly; align-items: center"
        >
          <el-link type="primary" style="margin-right: 5px">模板下载</el-link>
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:5000/users/acc_upload"
            method="post"
            :auto-upload="true"
            :on-success="handleUpload"
            :show-file-list="false"
          >
            <el-button type="primary">导入</el-button>
          </el-upload>
          <el-button type="primary" @click="handleExport">导出</el-button>
        </div>
      </div>

      <!-- ------------------------------------------- -->
      <el-table
        :data="tableData"
        ref="tableRef"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="账号" width="120">
          <template #default="scope">{{ scope.row.account }}</template>
        </el-table-column>
        <el-table-column property="userGroup" label="用户组" width="220" />
        <el-table-column property="ctime" label="创建时间" width="540" show-overflow-tooltip />
        <el-table-column property="address" label="操作">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="userDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ----------------------------------- -->
      <el-pagination
        style="margin-bottom: 10px"
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-button type="danger" @click="handleAllDel">批量删除</el-button>
      <el-button type="primary" @click="() => $refs.tableRef!.clearSelection()"
        >取消全部选择</el-button
      >
    </el-card>

    <!-- 编辑的弹窗 -->
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="账号编辑" width="500">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户组" :label-width="formLabelWidth">
          <el-select v-model="form.userGroup" placeholder="选择用户组">
            <el-option label="普通管理员" value="普通管理员" />
            <el-option label="超级管理员" value="超级管理员" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleIsEdit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  fetchList,
  fetchUserDel,
  fetchUserEdit,
  fetchUserBatchdel,
  fetchUserExport,
  fetchUserAcc_upload,
} from '@/api/users'
import { onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import moment from 'moment'

import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total = ref(0)

const tableRef = ref(null)
const selectArray = ref([])

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
  id: 0,
  account: '默认',
  userGroup: '普通管理员',
})

const fileList = ref<UploadUserFile[]>([])

//导入
const handleUpload = (response, uploadFile, uploadFiles) => {
  if (response.code === 5001) {
    ElMessage({
      message: '请上传xls或xlsx格式的文件！',
      type: 'warning',
    })
  }
  if (response.code === 0) {
    ElMessage({
      message: '上传成功，真聪明',
      type: 'success',
    })
  }
  console.log(response)
  console.log(uploadFile)
}
//导出
const handleExport = async () => {
  const res = await fetchUserExport({
    currentPage: currentPage4.value,
    pageSize: pageSize4.value,
  })
  window.open(res.url)
  console.log(res)
}
//页面大小发生变化
const handleSizeChange = async (val: number) => {
  const res = await fetchList({
    currentPage: 1,
    pageSize: val,
  })
  tableData.value = res.data
  total.value = res.total
}
//页面页数发生变化
const handleCurrentChange = async (val: number) => {
  const res = await fetchList({
    currentPage: val,
    pageSize: pageSize4.value,
  })
  tableData.value = res.data
  total.value = res.total
}
//用户列表
const tableData = ref([])
watch(tableData, () => {
  tableData.value.map((ele) => (ele.ctime = moment(ele.ctime).format('YYYY-MM-DD HH:mm:ss')))
})
interface rowType {
  id: number
  account: string
  userGroup: string
}
//编辑
const handleEdit = (row: rowType) => {
  form.value = row
  dialogFormVisible.value = true
}
const handleIsEdit = async () => {
  const data = {
    id: form.value.id,
    account: form.value.account,
    userGroup: form.value.userGroup,
  }
  const res = await fetchUserEdit(data)
  dialogFormVisible.value = false
}
//删除
const userDel = (id: number) => {
  ElMessageBox.confirm('此操作将永久删除该条数据，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      //删除的逻辑
      const res = await fetchUserDel({ id })
      handleSizeChange(pageSize4.value)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
//批量删除
const handleSelectionChange = (val: object) => {
  selectArray.value = val
}
const handleAllDel = async () => {
  const data = { ids: JSON.stringify(selectArray.value.map((ele) => ele.id)) }
  const resDel = await fetchUserBatchdel(data)
  const resList = await fetchList({
    currentPage: 1,
    pageSize: pageSize4.value,
  })
  tableData.value = resList.data
  total.value = resList.total
}
//初始渲染用户列表
onMounted(async () => {
  const res = await fetchList({
    currentPage: 1,
    pageSize: pageSize4.value,
  })
  tableData.value = res.data
  total.value = res.total
})
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
